<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>妙味课堂-HTML笔记</title>
<!-- <base target="_blank" /> -->
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px}
lo,ul{list-style:none;margin:0;padding:0}
a{text-decoration:none;}
img{border:none}
#bg{
  background:#F0F0F0 url(前端自编内容/引用文件/1.ico) no-repeat 40% 50px fixed;
  border:4px solid red;
  font-size:14px;
  font-family:微软雅黑,Airal;
  color:#000000;
  line-height:30px;
  padding:4px 6px 8px 8px;
}
#box{
  width:0px; height:0px;
  border-top:50px red solid;
  border-right:50px green solid;
  border-bottom:50px blue solid;
  border-left:50px yellow solid;
}
#div1{
  width:200px; height:100px;
  background:blue;
  margin-bottom:5px;
}
#div2{
  width:200px; height:100px;
  background:red;
  margin-top:10px;
}
.box{width:200px; height:50px; background:#0C6}
.box.b1{border:5px solid red}
.b3{border:2px dashed blue}

</style>
</head>

<body id="bg">
  <div id="box"></div>外边框border宽高为0
  <div id="div1"></div>
  <div id="div2"></div>
  <h3 id="box1"><b>我爱一条柴</b></h3> 
  <p>例一：</p>
  <div class="box b1">块1</div>
  <div class="box">块2</div>
  <div class="box b3">块3</div>
 
  <pre>&lt;!doctype html&gt;： 声明文档类型为html
&lt;meta /&gt;： 代码编码格式
utf-8： 国际标准（用记事本创建html时应注意该文件的格式应是否相同，否则将出现乱码。可另存为修改）
gb2312: 中文简体标准
background: red url(图片路径) no-repeat/repeat-x/repeat-y 40px/(top/center/bottom)/25%  30px/(top/center/bottom)/10% fixed/scroll; 背景色和背景图片二者叠加
border: 4px solid red; 边框样式：solid实线 dashed虚线 dotted点划线（IE6不兼容） border-(top/right/bottom/left)-(width/style/color):
font-size: 需要尽可能使用偶数
font-family: 默认宋体,Airal; 最常用，有优先级
color: purple / #6600CC / rgb(102,0,204) 字体颜色
line-height： 行高
padding: 上 右 下 左;
    内边距会影响盒子的大小，对称可简写
margin: 上 右 下 左;
    外边距会叠压不会叠加，即会选择最大margin作为两个div块的边距
    如果两个div块属于父子级关系（包含与被包含关系），那么子级的margin会传递给父级，可以改变父级的padding改变子级的位置
    margin-left/right:auto 可以让div块在浏览器改变大小时，始终保持居最右/最左。同时设置时将当前div块始终居中（或margin:0px auto;）
CSS常见17个样式：width、height、background、border、padding、margin、font-size、font-family、color、line-height、text-align 
    text-indent 首行缩进
    font-weight 文字着重
    font-style 文字样式
    text-decoration 文本修饰
    letter-spacing 字母间距
    word-spacing 单词间距
&lt;img /&gt;： src="路径" alt="图片信息"
&lt;a&gt;&lt;/a&gt;:  target="_blank/_self"在新窗口/本窗口打开链接，在head标签内写上<strong> base target="_blank 或_self" </strong>来定义 全局所有 连接均为新/本窗口打开
    1、链接： href="网页地址"
    2、下载： href="文件路径（图片/压缩包/安装包等）"	点击下载文件
    3、锚点：href="#box1"跳转到id="box1"的位置（定位）<a href="#box1">尝试一下：我爱一条柴</a>
    alt=""图片占位符  title=""鼠标提示符
&lt;strong&gt;&lt;/strong&gt;：强强调	（页面展示位粗体）
&lt;em&gt;&lt;/em&gt;：弱强调（页面展示位斜体）
&lt;ol&gt;&lt;/ol&gt;：有序列表
&lt;ul&gt;&lt;/ul&gt;：无序列表
&lt;dl&gt;&lt;/dl&gt;：定义列表(带有标题的列表) 
    &lt;dl&gt;
      &lt;dt&gt;定义列表的标题&lt;/dt&gt;
      &lt;dd&gt;列表项&lt;/dd&gt;
    &lt;/dl&gt;
图片格式：
	JPG：不支持透明半透明，所有空白区域填充白色 		JPG：网页中的大图，高清图（体积大）；
	GIF：支持透明，不支持半透明						GIF：网页中的小图标（动画图片）；
	png8：支持透明，不支持半透明						PNG8：网页中的小图标；
	png24：支持透明，也支持半透明					PNG24：图像中存在半透明效果的图片；
类选择器class： 每对标签都有且仅有一个对应的互不相同的id名称，但是可以有相同的类名称。
    当多个div标签具有相同的属性时，用class选择器比id选择器来得便捷。
    有个别标签需要再添加属性时可以设置两个类名，用空格隔开，再额外定义.box b1{}和.box b3{}：
     &lt;div class="box b1"&gt;块1&lt;/div&gt;
     &lt;div class="box"&gt;块2&lt;/div&gt;
     &lt;div class="box b3"&gt;块3&lt;/div&gt;
*{}通配符：全局应用，例如：*{border：1px solid red},全局将都有边框
选择符优先级：(假设以数字表示优先级，数字越大优先级越高)
    标签选择器1 &lt; class类选择器10+ &lt; id选择器100 &lt; 行间样式1000 &lt; JavaScript10000
    具体参考答案 选择符的优先级.html 文件<strong>（！important的优先级高于行间样式）</strong>
伪类别：
    link{}  未访问（默认）
    visited{}  访问过后（点击过后）
    hover{}  鼠标悬停（鼠标滑过）
    action{} 链接激活（鼠标按下）
    指针样式cursor:text等
    需要严格按照如上先后顺序编写：link visited hover active。    记忆方法：love hate
    因为四者属于同级关系，所以在style中的先后顺序遵循后者覆盖前者的规则，特别是visited不能放在hover之后，否则超链接的效果仅有一次且将一直处于访问过后的状态
    如：
    &lt;a class="red" href="#">123&lt;/a>
    &lt;a class="blue" href="#">abc&lt;/a>
    只想指定class="red"的样式时，为（a和.red之间没有空格）a.red{color:red}
    <strong>IE6浏览器不支持 a 以外</strong>其他标签的伪类
    IE6以上浏览器支持<strong>所有标签的 hover 伪类</strong>。
默认值重置(即CSS reset)：
    <strong>凡是浏览器默认的样式，一律不要使用。</strong>
    在浏览器中用F12查看相关标签的属性值，主要是外边距、边框样式、字体、字体大小等，<strong>意义在于保证各个浏览器的浏览效果一致</strong>。
    body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0px; font-size:12px; font-family:"宋体,Airal";}（发现字体可引号可不引号）
    ol,ul{list-style:none; margin:0px; padding:0px}
    a{text-decoration:none}
    img{border:none; vertical-align:top}
    根据实际情况重置,这样的性能其实比*{margin:0px padding:0px}性能更高，所以一般不要使用通用符*
标签的特性：
    1、内联/内嵌/行内属性标签：（span）
        1.1 默认同行可以继续跟同类型标签
        1.2 宽度有内容撑开，因此不支持设置宽度、高度
        1.3 不支持设置上下的margin和padding（左右可以）
    2、块级标签：（div）
        2.1 支持所有CSS命令
        2.2 默认独占一行，没有宽度时，默认撑满一行（高度由内容撑开）
    3、第三种标签：（img）
        3.1 可以设置宽高，但又不独占一行
    共同点：没有设置高度时，高度均由内容撑开
属性标签之间的转换：
    span{display:block}  显示为块
    div{display:inline}  显示为内嵌
    span,div{display:inline-block}  显示为一行内的块
inline-block:
    1、块级元素同行排列
    2、使内嵌支持设置宽高
    3、换行被解析（间隙大小为字符的一半）
    4、不设置宽度时，宽度由内容撑开
    5、<strong>IE6 IE7不支持属性标签的inline-block</strong>
    <strong>简单讲就是display:inline 转化成内联元素，不换行；display:block转换成块元素，换行；display:inline-block内联块元素，既不换行又可以使用块元素所拥有的属性，类似于块元素加了浮动效果，但低版本浏览器对这个不支持。</strong>
指针样式cursor：(规定要显示的光标的类型)
    pointer |text | move...
自定义指针：(以全局为例)
    body{cursor:url(光标图片路径),point};
    光标的图片格式最好采用“我的光标.cur”格式，后面的point是在浏览器不支持自定义光标时，选择默认光标<strong>(兼容处理)</strong>
title=“”属性：（&lt;abbr&gt;&lt;/abbr&gt;是定义缩写的标签，也可以用其他的标签替代）
    &lt;abbr&nbsp;title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;  
    鼠标悬停会显示HTML的额外信息===》 <abbr title="Hypertext Markup Language">HTML</abbr>
    &lt;!--  --&gt;标签和/*  */：注释的内容必须前后都留有一个空格
浮动：left/right/none（假设元素宽高一样，代码顺序为div1,div2,span1,span2）
    1、使块级元素同行排列
    2、使内嵌支持设置宽高
    3、换行不会被解析
    4、不设置宽度时，宽度由内容撑开
    5、使元素脱离文档流
    6、提升层级半级
    float:left 时，从左往右顺序为div1,div2,span1,span2
    float:right时，从左往右顺序为span2,span1,div2,div1
    元素加了浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止
清除浮动:元素在某个方向不能有浮动元素
    clear:left/right/both/none
    包含状态时如何清除浮动
    1、给子父级都浮动（脱离文档流）
    2、给父级加inline-block
    3、在浮动元素下方再加一空的div，并给出样式{height:0; font-size:0; clear:both}此方法的问题在于:<strong>在IE6下，高度在小于19px的元素，高度会被当做19px处理，即IE最小高度值为19px（触发条件：在快元素浮动时，有margin左右边距小于19px的值，三者同时满足时会出现这样的问题）（IE6下的双边距BUG
	在IE6下，(只有是块元素)(有浮动)和(横向margin值)的时候，横向的margin值会被放大成两倍
	
	解决办法: display:inline;）</strong>
    4、在浮动元素下方再加一标签： &lt;br clear="all" /&gt;<strong>但是不符合工作中（W3C标准）：结构、样式、行为分离的要求。</strong>
    5、给浮动元素的父级加{zoom:1}和伪类：after{content:""；display:block;clear:both}  <strong>**这是目前最流行的清除样式的方法**{zoom:1}表示显示为原来的大小，值是2表示显示为原来大小的2倍（但是火狐浏览器不支持zoom）</strong>
    6、给浮动元素的父级加overflow：一般是auto或hidden  <strong>IE6下单独使用不起作用，但是可以搭配{zoom:1}使达到清除浮动的效果</strong>
      溢出overflow：(用好overfloat的关键是必要时，设定box的宽度要大于实际的宽度)
      auto  只有内容溢出时才显示滚动条
      scroll  始终显示滚动条
      hidden  溢出部分无法显示出来
    <strong>注释：在IE6，IE7下，浮动元素的父级有宽度时，就不用清浮动</strong>
    图片元素可以滴话还是用div包起来，设置宽高<strong>（如果直接img标签，图片挂掉之后，火狐浏览器不能正常显示宽高，影响结构布局）</strong>
li下的文字
    必须加line-height,不然会有默认的行高，导致出现显示上会有间距
相对定位
    格式：position:relative; top/right/bottom/left: 100px;（可多个，分号隔开）
    （例如position:relative; right:100px;相对于右边，左移了100px）
    1.不会影响元素本身的特性（块元素还是块元素，内嵌还是内嵌）
    2.不会使元素脱离文档流 （可以总结为，基本是没有影响的）
绝对定位
    格式一：  position:absolute; z-index:1; 定位层级（数字越高层级越高）
    格式二：  position:absolute; top | right | bottom |left : 100px;（可多个，分号隔开
    1.使元素完全脱离文档流
    2.使内嵌支持设置宽度、高度
    3.块元素未设置宽度时，由标签内容撑开宽度
    4、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
    5、相对定位一般都是配合绝对定位元素使用；
    定位元素  默认后者层级高于前者（即覆盖前者）
    绝对定位是相对于整个浏览器文档html（关系：body + margin = html），而不是body
固定定位position:fixed；
    1、与绝对定位的特性基本一致，使内嵌元素支持宽高，差别是固定元素始终相对整个文档进行定量偏移；(在设置了浏览器文档高度【不为100%】，拉动滚动条固定元素始终保持与整个文档的相对位置。
    2、即使该固定素有一个父级包裹，父级元素定位偏移，也不会影响固定定位元素的位置，只有父级独自发生地位偏移)
    <strong>问题：IE6不支持固定定位fixed；</strong>
    position:relative | absolute | fixed | static | inherit;
    position:static ； 默认值（如果写在任何一个）
    position:inherit ;  从父元素继承定位属性的值(一般不用)
    <strong>问题：
    相对定位    IE6下，父级的 overflow:hidden的包不住加了相对定位的子级
           解决办法：可以把父级也变成相对定位元素（因为加相对定位，对元素基本是没有影响的）
    绝对定位    IE6 下定位元素的父级宽高 都 为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。  
           解决办法：尽量避免使用奇数
清浮动（少用）：在子级元素float:left/right时，可以给父级元素加position:absolute 或 position:fixed（IE6不兼容） 可以清浮动
那些元素的宽度由内容撑开	
	display:inline;   但是不支持高度
	display:inline-block;  但是IE6 7下不兼容
	float  
	position:absolute  但是每一项都要设置相对定位/坐标，更麻烦麻烦
	position:fixed   但是IE6不兼容
数字、单词间断：
    word-break:break-all;  将超出的所有单词和数字都拉回盒子
    word-wrap:break-word;  只管超出盒子边框的数字或单词，将他拉回盒子
    </strong>
文字溢出省略：
    width:200px;
    white-space:nowrap;  /* 强制不换行 */
    overflow:hidden;
    text-overflow:ellipsis;/* CSS3.0的样式 超出的部分显示省略号代替 */
    缺一不可
怪异模式：
    可视宽: 元素的内容宽+padding+border
	元素的内容宽：元素里可以放内容的宽度
	<strong>怪异模式： 可视宽  设置宽度  内容宽 设置宽度-padding-bordersss
	在IE6,7,8下不设置文档声明的时候	页面的盒模型解析(即没写或写错&lt;!DOCTYPE html>) 就会进入怪异模式</strong>
表单的一些样式：
   单选：radio  复选：checkbox  上传文件：file
   下拉选框：
   &lt;select>
     &lt;option>2016&lt;/option>
     &lt;option selected>2015&lt;/option>
     &lt;option>2014&lt;/option>
   &lt;/select>
   <select>
     <option>2016</option>
     <option selected>2015</option>
     <option>2014</option>
   </select>
   select支持宽度设置，但高度的支持不是很完善，很多浏览器不一样
   textarea默认是可自己手动调整大小的，所以必须加上 resize:none;
  </pre>


</html>

